<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<view class="grace-body grace-news-list">
				<view class="grace-news-item">
					<view class="grace-news-img grace-news-img-l">
						<image :src="product.images_url[0]" mode="widthFix" class="grace-news-img-in"></image>
					</view>
					<view class="grace-news-body">
						<text class="grace-news-title">{{product.name}}</text>
						<text class="grace-img-card-price">￥{{product.price}}</text>
						<text class="grace-line-through grace-text-small grace-gray">￥{{product.origin_price}}</text>
					</view>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<view class="grace-body grace-list">
				<view class="grace-list-items">
					<view class="grace-h4">收货地址</view>
					<view class="grace-list-body" style="margin-left:100rpx;">
						<view class="grace-list-title">
							<text class="grace-list-title-text">{{address.name}}</text>
							<text class="grace-list-title-desc">{{address.mobile}}</text>
						</view>
						<view class="grace-list-body-desc">{{address.detail}}</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right" @tap="selectAddress"></text>
				</view>
			</view>
			<view class="grace-body grace-nowrap grace-space-between">
				<text class="grace-h4">运费 :</text>
				<text style="font-size:32rpx; color:#F00;">￥{{freight}}</text>
			</view>
		</view>
		<view slot="gFooter" class="grace-nowrap grace-flex-vcenter grace-border-t" style="background-color:#FFFFFF;">
			<view class="grace-body grace-shoppingcard-count grace-nowrap grace-flex-vcenter">
				<text class="grace-text">合计 :</text>
				<text style="font-size:32rpx; color:#F00;">￥{{product.price}}</text>
			</view>
			<view class="grace-shoppingcard-checkout grace-bg-red" @tap="checkout">立即购买</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceReload from '../../graceUI/components/graceReload.vue';
	var page = 1;
	export default {
		data() {
			return {
				mainHeight: 600,
				// 每个选项卡对应的分页
				// 加载状态
				// 每个滚动区域的滚动值
				scrollTops: 1,
				loadingTypes: 3,
				product: {
					name: '',
					price: 0,
					origin_price: 0,
					images_url: ['']
				},
				address:{
					nickname:'',
					mobile:'',
					address:''
				},
				totalprice:0,
				freight:0
			}
		},
		onLoad: function(options) {
			let id = options.id;
			this.getDetail(id);
		},
		methods: {
			//获取详情
			async getDetail(id) {
				let data = await this.$apis.getProductDetail({
					goods_id: id
				});
				this.product = data.goods;
			},
			//立即购买
			async checkout() {
				let ids = [this.product.id];
				let data = await this.$apis.listTobuy({
					goods_ids: ids
				});
				console.log(data);
			},
			// 加载更多
			scrollend: function(e) {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes == 2 || this.loadingTypes == 4) {
					return false;
				}
				console.log('loadmore.....');
				this.getNews();
			},
			scroll: function(e) {
				this.scrollTops = e.detail.scrollTop;
			},
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchmove(touchObj);

			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops,
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload.touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				page = 1;
				this.loadingTypes = 3;
				this.paginate(1);
			},
			//打开报名详情
			goDetail: function(id) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.signup,
					query: {
						id: id
					}
				})
			},
			//选择地址
			selectAddress:function(){
				let thiz = this;
				//监听事件
				this.$eventHub.$on('fireSelectAddress', function(data) {
					console.log(data);
					thiz.address = data;
				    //清除监听，不清除会消耗资源
					thiz.$eventHub.$off('fireSelectAddress');
				});
				this.$mRouter.push({
					route: this.$mRoutesConfig.addressList
				})
			}
		},
		components: {
			gracePage,
			graceFlex,
			graceEmpty,
			graceLoading,
			graceReload,
		}
	}
</script>
<style>
	.grace-news-btn {
		display: block;
		line-height: 32rpx;
		font-size: 26rpx;
		width: 160rpx;
		padding-left: -30rpx;
	}

	.grace-news-img {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		font-size: 0;
	}

	.grace-news-img-in {
		width: 100%;
	}

	.grace-news-imgs-img {
		width: 225rpx;
		height: 380rpx;
	}

	.ur-date-name {
		padding: 20rpx 0;
		width: 500rpx;
	}
	.grace-shoppingcard-count{width:600rpx;}
	.grace-shoppingcard-checkout{width:280rpx; height:100rpx; line-height:100rpx; font-size:28rpx; text-align:center; flex-shrink:0;}
</style>
